<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"
	  xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3">
<head>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<title>后台管理系统</title>
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<meta name="keywords" content="后台管理系统">
	<meta name="description" content="">
	<link rel="shortcut icon" href="static/img/favicon.ico">

	<link rel="stylesheet" href="/css/global.css">
	<link rel="stylesheet" type="text/css" href="/css/common.css" media="all">
	<link rel="stylesheet" type="text/css" href="/css/personal.css" media="all">
	<link rel="stylesheet" type="text/css" href="http://at.alicdn.com/t/font_9h680jcse4620529.css">

	<link rel="stylesheet" href="/css/bootstrap.min.css">
	<link rel="stylesheet" href="/css/font-awesome.min.css">
	<link rel="stylesheet" href="/plugins/jqgrid/ui.jqgrid-bootstrap.css">
	<link rel="stylesheet" href="/plugins/ztree/css/metroStyle/metroStyle.css">
	<link rel="stylesheet" href="/css/jqgrid/main.css">
	<link rel="stylesheet" href="/css/bootstrap-table.min.css">
	<link rel="stylesheet" href="/plugins/treegrid/jquery.treegrid.css">

	<script src="/libs/jquery.min.js"></script>
	<script src="/js/bootstrap-table.min.js"></script>
	<script src="/plugins/layer/layer.js"></script>
	<script src="/plugins/layui_v2/layui.js"></script>
	<script src="/libs/bootstrap.min.js"></script>
	<script src="/plugins/jqgrid/grid.locale-cn.js"></script>
	<script src="/plugins/jqgrid/jquery.jqGrid.min.js"></script>
	<script src="/plugins/ztree/jquery.ztree.all.min.js"></script>
	<script src="/libs/common.js"></script>

	<script src="/plugins/treegrid/jquery.treegrid.min.js"></script>
	<script src="/plugins/treegrid/jquery.treegrid.bootstrap3.js"></script>
	<script src="/plugins/treegrid/jquery.treegrid.extension.js"></script>
	<script src="/plugins/treegrid/tree.table.js"></script>

</head>
<body>

<div class="larry-grid layui-anim layui-anim-upbit larryTheme-A" >
	<div class="larry-personal" >
		<div class="layui-tab" >

			<div id="rrapp">
				<div class="grid-btn">
					<a class="btn btn-primary resAdd_btn" ><i class="fa fa-plus"></i>&nbsp;新增</a>
					<a class="btn btn-primary res_edit" ><i class="fa fa-pencil-square-o"></i>&nbsp;修改</a>
					<a class="btn btn-primary res_fail" ><i class="fa fa-trash-o"></i>&nbsp;删除</a>
				</div>
				<table id="menuTable" data-mobile-responsive="true" data-click-to-select="true">
					<thead>
					<tr>
						<th data-field="selectItem" data-checkbox="true"></th>
					</tr>
					</thead>
				</table>
			</div>

		</div>
	</div>
</div>

<!-- 选择菜单 -->
<div id="menuLayer" style="display: none;padding:10px;">
	<ul id="menuTree" class="ztree"></ul>
</div>

<script type="text/javascript" th:inline="javascript">
    layui.config({
        base : "/js/"
    }).use(['form', 'table','common'], function () {
        var $ = layui.$,
            form = layui.form,
            table = layui.table,
            layer = layui.layer,
            common = layui.common;



        //var loading = layer.load(0,{ shade: [0.3,'#000']});

        /**菜单表格加载*/
        /*table.render({
           elem: '#menuTableList',
           url: '/sys/menu/listAjax',
           id:'menuTable',
           method: 'get',
           height:'full-140',
           skin:'row',
           even:'true',
           size: 'sm',
           cols: [[
               {type:"numbers"},
               {type:"checkbox"},
               {field:'name', title: '菜单名称',align:'center', class:'layui-colla-title'},
               {field:'parentName', title: '上级菜单',align:'center',width: '8%'},
               {field:'menuLevel', title: '菜单级别',align:'center',templet: '#resLevelTpl'},
               {field:'url', title: '菜单路径',align:'left',width: '12%'},
               {field:'type', title: '菜单类型',align:'center',width: '6%',templet: '#menuTypeTpl'},
               {field:'perms', title: '权限',align:'center',width: '12%'},
               {field:'status', title: '菜单状态',align:'center',width: '6%',templet: '#menuStatusTpl'},
               {field:'createTime', title: '创建时间',align:'center',width: '10%'},
               {field:'updateTime', title: '修改时间',align:'center',width: '10%'},
               {title: '操作', align:'center',width: '10%', toolbar: '#resBar'}

           ]],
           page: true,
            done: function (res, curr, count) {
                common.resizeGrid();
                layer.close(loading);

            }
       });*/

        /**查询*/
        $(".menuSearchList_btn").click(function(){
            var loading = layer.load(0,{ shade: [0.3,'#000']});
            //监听提交
            form.on('submit(menuSearchFilter)', function (data) {
                table.reload('menuTable',{
                    where: {
                        key:data.field.searchTerm,
                        value:data.field.searchContent
                    },
                    height:'full-140',
                    page: true,
                    done: function (res, curr, count) {
                        common.resizeGrid();
                        layer.close(loading);

                    }
                });

            });

        });


        /**新增菜单*/
        $(".resAdd_btn").click(function(){
            var url = "/sys/menu/add";
            common.cmsLayOpen('新增菜单',url,'750px','470px');
        });

        $(".res_edit").click(function(){
            var menuId = getMenuId();
            if(menuId == null){
                return ;
            }
			var url =  "/sys/menu/edit/"+menuId;
			common.cmsLayOpen('编辑菜单',url,'750px','470px');
        }

        function getMenuId () {
            var selected = $('#menuTable').bootstrapTreeTable('getSelections');
            if (selected.length == 0) {
                alert("请选择一条记录");
                return null;
            } else {
                return selected[0].id;
            }
        }

        /**监听工具条*/
        table.on('tool(menuTable)', function(obj) {
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值
			alert(1);
            //编辑菜单
            if(layEvent === 'res_edit') {
                var id = data.id;
                var url =  "/sys/menu/edit/"+id;
                common.cmsLayOpen('编辑菜单',url,'750px','470px');
                //失效菜单
            }else if(layEvent === 'res_fail'){

            }

        });

    });

</script>

<!--工具条 -->
<!--<script type="text/html" id="resBar">
	<div class="layui-btn-group">
		<a class="layui-btn layui-btn-xs res_edit" lay-event="res_edit"><i class="layui-icon larry-icon larry-bianji2"></i> 编辑</a>
		<a class="layui-btn layui-btn-xs layui-btn-danger res_fail" lay-event="res_fail"><i class="layui-icon larry-icon larry-ttpodicon"></i>失效</a>
	</div>
</script>-->

<script src="/js/menu.js"></script>
</body>
</html>